<template>
  <div class="chart-container">
    <div class="chart-box">
      <chart
        :series-data="barChartData.seriesData"
        :x-axis-data="barChartData.xAxisData"
        :legend-data="barChartData.legendData"
        :stack="barChartData.stack"
        height="100%"
        width="100%"
      />
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/BarChart' // 全局引入

export default {
  name: 'Bar',
  components: { Chart },
  data() {
    return {
      // 柱状图的数据
      barChartData: {
        stack: true, // 柱状图是否叠罗汉 true 为 叠罗汉
        legendData: ['pageA', 'pageB', 'pageC'],
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [{
          name: 'pageA',
          barWidth: '40%',
          data: [79, 52, 200, 334, 390, 330, 220]
        }, {
          name: 'pageB',
          barWidth: '40%',
          data: [80, 52, 200, 334, 390, 330, 220]
        }, {
          name: 'pageC',
          barWidth: '40%',
          data: [30, 52, 200, 334, 390, 330, 220]
        }]
      }
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.chart-box {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
}
</style>

